<template>
    <div class="all">
        <div class="left">
            <div class="type">
                <img src="../../assets/VedioShow/vedioshow2.png"/>
                <a  class="head1">场景</a>
            </div>
            <div>
                <div class="head2"><a>室外</a></div>
                <div class="head3"><a>草地</a></div>
                <div class="head3"><a>商场</a></div>
            </div>
            <div>
                <div class="head2"><a>室内</a></div>
                <div class="head3"><a>桌面</a></div>
                <div class="head3"><a>地板</a></div>
            </div>
            
                <div class="type">
                    <img src="../../assets/VedioShow/vedioshow1.png"/>
                    <a class="head1" style="color:red">视频分类</a>
                </div>

            <div>
                <div class="head3" style="color:red"><a>美妆</a></div>
                <div class="head3"><a>体育</a></div>
                <div class="head3"><a>科普</a></div>
            </div>
            
                <div class="type">
                    <img src="../../assets/VedioShow/vedioshow1.png"/>
                    <a class="head1" style="color:red"> 来源</a>
                </div>

            <div>
                <div class="head3" style="color:red"><a>抖音</a></div>
                <div class="head3"><a>快手</a></div>
            </div>
            
                <div class="type">
                    <img src="../../assets/VedioShow/vedioshow1.png"/>
                    <a class="head1" style="color:red">广告时间</a>
                </div>

            <div>
                <div class="head3"><a>3-15s</a></div>
                <div class="head3"><a>15-30s</a></div>
                <div class="head3"><a>>30s</a></div>
            </div>
        </div>
        <div class="right">
            <div class="right_all">
                <div class="right_top">
                     <el-select class="select" v-model="value_type" placeholder="请选择">
                      
                    </el-select>
                        
                    <el-input class="button_group_search"   placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input"></el-input>

                </div>
                <div class="cntentsize">
                    <div class="right_center" >
                        <div class="card_fit" :key="index" v-for="(item,index) in cardMessage">
                        <el-card   class="box-card" @click="push(item.vid);">
                            <div @click="push(item.vid)"  class="vedio" >
                                <img class="vedio_pic" :src="item.fengmian"/>
                            </div>
                            <div class="fire">
                                <img class="fire_burn" src="../../assets/producer_space/if-fire-burn.png"/>
                                <span class="fire-degree">197</span>
                                <div  class="time">
                                    <span class="time">7s+5s+6s/3:05</span>
                                </div>
                                <div class="all_vedio_name">
                                <a class="vedio_name">{{item.vname}}</a><br>
                                <!-- <a class="vedio_name">构建美好家园</a> -->
                            </div>
                            <div>
                                <el-card class="type1"><a class="type_a">科普</a></el-card>
                                <el-card class="type1"><a class="type_a">地面</a></el-card>
                                </div>
                                <div class="name_photo">
                                    <img class="profile_photo" src="../../assets/headgreen.png"/>
                                    <div class="photo_name"><h5>{{item.creater.cname}}</h5></div>
                                </div>
                            </div>
                        </el-card>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'VedioShow',
    data() {
        return {
            value_type:'',
            input:'',
            cliked1:"uncliked",
            cliked2:"cliked",
            cliked3:"uncliked",
            cardMessage:[],
            cvid:'1',
        }
    },
    methods:{
        push:function(id){
            console.log(id)
            sessionStorage.setItem('vid',JSON.stringify(id))
            this.$router.push({path:'/adver_vedio_detail'})
        },
        showCardMessage(){
        //cardMessage接口开始
            this.$axios({
               method:'post',
               url:'http://1.117.65.58:9001/videoandcreater/findall',
            //    params:params,
            }).then(response=>{
            console.log(response);
            const arr =response.data.data;
            this.cardMessage=arr;
            console.log(this.cardMessage)
            console.log(arr);
            // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
           }).catch(function(err){
               console.log(err)
           })
        //cardMessage接口结束
        }
    },
    mounted(){
      this.showCardMessage();
    }

}
</script>

<style scoped>
@import "../../style/VedioShow.css";
</style>